<extend name="Layout/application"/>
<block name="css">
    <style>
        .mask {
            position: absolute;
            top: 0px;
            filter: alpha(opacity=60);
            background-color: #777;
            z-index: 1002;
            left: 0px;
            opacity: 0.5;
            -moz-opacity: 0.5;
            cursor: cell;
        }

        .model {
            position: absolute;
            z-index: 1003;
            width: 600px;
            height: 600px;
            text-align: center;
            line-height: 600px;
            background-color: inherit;
            cursor: pointer;
            display: none;
        }
    </style>

</block>

<block name="content">
    <div class="row">
        <div class="col-md-12">

            <div class="row">
                <div class="col-md-8">
                    <div class="page-header">
                        <h1>系统首页</h1>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-10">
                    <div class="panel panel-default">
                        <div class="panel-heading">文件管理</div>
                        <div class="panel-body">

                            <table class="table">
                                <thead>
                                <tr>
                                    <th>编号</th>
                                    <th>名称</th>
                                    <th>文件类型</th>
                                    <th>创建时间 \ 编辑时间</th>
                                    <th>文件大小</th>
                                    <th>操作&nbsp;
                                        <if condition="$path neq getcwd().DIRECTORY_SEPARATOR.'Public'">
                                            <a href="/index.php?m=Admin&c=File&a=index&path={{$dir}}">
                                                <button type="button" class="btn btn-primary btn-xs">返回上层</button>
                                            </a>
                                        </if>
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                <volist name="files" id="f">
                                    <tr>
                                        <td>{{$i}}</td>
                                        <td class="name" contenteditable data-path="{{$path}}/{{$f.name}}"
                                            data-name="{{$f.name}}">{{$f.name}}
                                        </td>
                                        <td>{{$f.type|get_file_type}}</td>
                                        <td>{{$f.ctime}} \ {{$f.mtime}}</td>
                                        <td>{{$f.size|get_file_size}}</td>
                                        <td>
                                            <if condition="$f.type eq 'dir'">
                                                <a href="/index.php?m=Admin&c=File&a=index&path={{$path}}/{{$f['name']}}"><span
                                                        class="glyphicon glyphicon-log-in"></span></a>&nbsp;
                                                <a href="/index.php?m=Admin&c=File&a=upload&path={{$path}}/{{$f['name']}}"><span
                                                        class="glyphicon glyphicon-open"></span></a>&nbsp;
                                                <elseif condition="$f.is_img eq 1"/>
                                                <a href="javascript: void 0;" class="show_img"
                                                   onclick="showAll('#model')"
                                                   data-path="{{$path}}/{{$f['name']}}"><span
                                                        class="glyphicon glyphicon-eye-open"></span></a>&nbsp;
                                                <a href="/index.php?m=Admin&c=File&a=download&path={{$path}}/{{$f['name']}}"><span
                                                        class="glyphicon glyphicon-save"></span></a>&nbsp;
                                                <else/>
                                                <a href="/index.php?m=Admin&c=File&a=edit&path={{$path}}/{{$f['name']}}"><span
                                                        class="glyphicon glyphicon-pencil"></span></a>&nbsp;
                                                <a href="/index.php?m=Admin&c=File&a=upload&path={{$path}}/{{$f['name']}}"><span
                                                        class="glyphicon glyphicon-save"></span></a>&nbsp;
                                            </if>
                                            <a href="/index.php?m=Admin&c=File&a=destroy&path={{$path}}/{{$f['name']}}"
                                               onclick="javascript:return confirm('确认要删除吗？')">
                                                <span class="glyphicon glyphicon-trash"></span></a>&nbsp;

                                        </td>
                                    </tr>
                                </volist>
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>


                <div class="col-md-2">
                    <div class="list-group">
                        <a href="javascript: void 0;"
                           class="list-group-item list-group-item-info sort_category" data-toggle="modal"
                           data-target="#myModal">
                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 新增 (add)
                        </a>
                        <a href="{{:U('upload',array('path'=>$path))}}" class="list-group-item list-group-item-info sort_category">
                            <span class="glyphicon glyphicon-open" aria-hidden="true"></span> 上传 (sort)
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="mask" class="mask"></div>
    <!--<a href="javascript:;" onclick="showMask()">点我显示遮罩层</a><br/>
    <a href="javascript:;" onclick="letDivCenter('#model')">点我让DIV始终显示在屏幕中间</a><br/>
    <a href="javascript:;">点我显示所有</a><br/>-->

    <div id="model" class="model">
        <img style="width: inherit;" id="img" src=""/>
    </div>


    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">新增文件</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form" method="post"
                          action="{{:U('create',array('path'=>$path))}}">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">类型</label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="type" class="type" id="inlineRadio1" value="file"
                                           checked>
                                    文件
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="type" class="type" id="inlineRadio2" value="dir"> 文件夹
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="name" id="inputEmail3"
                                       placeholder="名称">
                            </div>
                        </div>
                        <div class="form-group" id="contents">
                            <label for="content" class="col-sm-2 control-label">内容</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" name="content" id="content" rows="6"
                                          placeholder="内容"></textarea>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary">新增</button>
                        </div>
                    </form>

                </div>

            </div>
        </div>
    </div>


</block>
<block name="js">
    <script>
        $(function () {
            $(".type").click(function () {
                var type = $(this).val();
                console.log(type);
                if (type == 'dir') {
                    $("#contents").hide();
                } else
                    $("#contents").show();
            });

            $(".name").blur(function () {
                if ($.trim($(this).text()) == $(this).data('name')) {
                    return false;
                }
                console.log($(this).data('name'));
                var data = {
                    oldname: $(this).data('path'),
                    newname: $.trim($(this).text())
                };
                $.post("{{:U('rename_file')}}", data);
                location.reload();
            })
        });


        //兼容火狐、IE8
        function showMask() {
            $("#mask").css("height", $(document).height());
            $("#mask").css("width", $(document).width());
            $("#mask").show();
        }
        //让指定的DIV始终显示在屏幕正中间
        function letDivCenter(divName) {
            var top = ($(window).height() - $(divName).height()) / 2;
            var left = ($(window).width() - $(divName).width()) / 2;
            var scrollTop = $(document).scrollTop();
            var scrollLeft = $(document).scrollLeft();
            $(divName).css({position: 'absolute', 'top': top + scrollTop, left: left + scrollLeft}).show();
        }
        function showAll(divName) {
            showMask();
            letDivCenter(divName);
        }


        $(function () {
            $("#mask").click(function () {
                $(this).hide();
                $("#model").hide();
                $("#img").attr('src', '');
            });

            //通过请求拿到img地址
            $(".show_img").click(function () {
                var info = {
                    path: $(this).data('path')
                };

                console.log($(this).data('path'));

                $.post("{{:U('show')}}", info, function(data) {
                    $("#img").attr('src', data);
                }, 'html')
            })
        })
    </script>
</block>